<template>
  <h4>当前求和：{{ count }}</h4>
  <button @click="count++">点我+1</button>
  <hr />
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ job.j1.salary }}K</h2>
  <h3 v-show="person.car">座驾信息：{{ person.car }}</h3>
  <button @click="name += '-'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪资</button>
  <button @click="showRawPerson">输出最原始person</button>
  <button @click="addCar">添加一台车</button>
  <button v-show="person.car" @click="person.car.price++">换价格</button>
  <button v-show="person.car" @click="person.car.name += '!'">换车名</button>
</template>
    
<script>
import { ref, reactive, toRefs, toRaw, markRaw } from 'vue'
export default {
  name: 'App',
  setup() {
    let count = ref(0)
    let person = reactive({
      name: '张三',
      age: 19,
      job: {
        j1: {
          salary: 20,
        },
      },
    })
    function showRawPerson() {
      // toRaw指处理reactive响应式数据
      const p = toRaw(person)
      p.name = '里斯'
      console.log(p)
    }

    function addCar() {
      let car = {
        name: '奔驰',
        price: 40,
      }
      person.car = markRaw(car)
    }

    // 返回一个对象
    return {
      count,
      showRawPerson,
      addCar,
      person,
      ...toRefs(person),
    }
  },
}
</script>  